<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/input.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name1: {
                        label: '属性',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入',
                            clearable: true,
                            showWordLimit: true,
                            maxlength: 10
                        }
                    },
                    name2: {
                        label: '类型',
                        widget: 'input',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入',
                            clearable: true,
                            showWordLimit: true,
                            maxlength: 30,
                            autosize: {
                                minRows: 4,
                                maxRows: 6
                            }
                        }
                    },
                    name3: {
                        label: '插槽',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入'
                        },
                        slots: {
                            prefix(h) {
                                return <i class="el-icon-edit" style={ { lineHeight: '32px' } }></i>
                            },
                            suffix(h) {
                                return <i class="el-icon-share" style={ { lineHeight: '32px' } }></i>
                            },
                            prepend: (h) => {
                                return (
                                    <el-select vModel={ this.prependValue } style={ { width: '110px' } }>
                                        {
                                            ['手机号', '身份证', '邮箱'].map(option => {
                                                return <el-option props={{
                                                    label: option,
                                                    value: option
                                                }} key={ option }>{ option }</el-option>
                                            })
                                        }
                                    </el-select>
                                )
                            },
                            append: (h) => {
                                return <el-button vOn:click={ this.nameAppend }>append</el-button>
                            }
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                col: {
                    span: 12
                }
            },
            prependValue: ''
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    },
    methods: {
        nameAppend() {
            console.log(this.prependValue);
        }
    }
}
</script>

<style>

</style>
